<template>
  <div class="pageBox">
    <div class="page">
      <router-link
        :to="{ name: 'DachuTwoLive' }"
        :class="{ active: curType == 1 }"
        @click.native="changeType(1)"
        >大触直播</router-link
      >
      <router-link
        :to="{ name: 'DachuTwoVisit' }"
        :class="{ active: curType == 2 }"
        @click.native="changeType(2)"
        >大触专访</router-link
      >
      <router-link
        :to="{ name: 'DachuTwoAround' }"
        :class="{ active: curType == 3 }"
        @click.native="changeType(3)"
        >大触周边</router-link
      >
    </div>
    <router-view />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

// let data = reactive({
//   curType: 1,
// });
const curType = ref(1); // 默认选中大触直播

const changeType = (id) => {
  // console.log(id);
  curType.value = id;
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.pageBox {
  .page {
    width: 100vw;
    height: 45px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      color: #a5a5a5;
    }
  }
}
.active {
  color: #0395e4 !important;
  position: relative;
  &::after {
    content: "";
    width: 30px;
    height: 3px;
    background-color: #0395e4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
  }
}
</style>
